<template>
    <a-modal title="添加说明" width="800px" :visible="visible" @ok="handleOk" @cancel="handleCancel">
        <a-transfer
            show-search
            v-drag-modal
            :data-source="mockData"
            :render="item => item.xswtmx_mc"
            :row-key="record => record.xswtmx_mc"
            :list-style="{
              height: '430px',
            }"
            @selectChange="handleSelectChange"
        />
    </a-modal>
</template>
<script>
import {
    queryXsscZjPsqk
} from '@/api/manage'
export default {
    name: 'AddDescription',
    props: ['showFlag', 'flid', 'sbnd', 'xswtbh'],
    watch: {
        showFlag(newVal, oldVal) {
            if (newVal != oldVal) {
                this.visible = true
                this.sourceSelectedKeys = []
                this.targetKeys = []
                this.getData()
            }
        }
    },
    data() {
        return {
            visible: false,
            mockData: [],
            targetKeys: [],
            disabled: false,
            sourceSelectedKeys: []
        }
    },
    methods: {
        getData() {
            queryXsscZjPsqk({
                xswtbh: this.xswtbh
            }).then(res=>{
                if (res.code == 200) {
                    this.mockData = res.result
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        handleOk() {
            if (this.sourceSelectedKeys.length == 0) {
                this.$message.warning('请选择添加说明')
                return
            }
            this.targetKeys = [...this.sourceSelectedKeys];
            this.$emit('callbackDescription', this.targetKeys.join())
            this.visible = false
        },
        handleCancel() {
            this.visible = false
        },
        handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
            this.sourceSelectedKeys = sourceSelectedKeys;
        },
    },
}
</script>
<style lang="less" scoped>
/deep/.ant-transfer {
    .ant-transfer-list {
        &:first-child {
            width: 100% !important;
        }
        &:last-child {
            display: none !important;
        }
    }
    .ant-transfer-operation {
        display: none !important;
    }
}
</style>
